{% extends "base.html" %}
{% block head %}
    {{ super() }}
    <style>
        .ci-div{
            margin-top: 20px;
            margin-bottom: 20px;
            border: 1px solid #eeeeee;
            padding: 0px 0px 0px 0px;
            border-radius: 3px;
            min-width: 350px;
        }
        .ci-title{
            color: white;
            font-weight: bold;
            min-height: 55px;
            padding: 5px;
            background: rgba(239, 90, 90, .7);
            width: 65%;

        }

        .ci-author{
            color: white;
            font-weight: bold;
            min-height: 55px;
            padding: 5px;
            background: rgba(80, 128, 92, 0.7);
            width: 35%;
            text-align: center;
            vertical-align:middle;
            overflow:hidden;
            position:relative;
            display:table-cell;
        }
        .ci-content{
            padding: 15px;
            border-radius: 5px;
            background-image: url("/static/img/peom-bg.JPG");
        }
        .ci-title-date{
            color: #488b8f;
            padding-left: 10px;
            font-weight: bold;
        }
        .ci-title-n-date{
            font-weight: bold;
            color: #333;
            padding-right: 10px;
        }
        body{
            background-repeat:no-repeat ;
            background-size:100% 100%;
            background-attachment: fixed;
        }
    </style>
{% endblock %}
{% block title %}
    唐宋诗
{% endblock %}
{% block content %}
    <body background="{{ url_for('static', filename='img/poem.jpg') }}">
    <main>
        <div class="container" style="height: 100%">
            <div class="row justify-content-center" style="height: 100%">
                <div class="align-self-center ci-div">
                    <div style="width: 65%;background: #20c997;height: 3px;" class="float-left"></div>
                    <div style="width: 35%;background: #00AAEE;height: 3px;" class="float-right"></div>
                    <div class="ci-title-date">
                        <p class="float-left">{{ now }}</p>
                    </div>
                    <div class="ci-title-n-date">
                        <p class="float-right">{{ lundar.gz_year() }}·{{ lundar.ln_date_str() }}</p>
                    </div>
                    <div class="float-left ci-title">
                        <p style="margin-bottom: 0px;">{{ poem.title }}</p>
                    </div>
                    <div class="float-right ci-author">
                        <p style="margin-bottom: 0px;">{{ poem.poets.dynasties.name }}·{{ poem.poets.name }}</p>
                    </div>
                    <div style="height: 100px;"></div>
                    <div class="text-center ci-content">
                        {% for sentence in poem.content|ssplit('。') %}
                            {% if loop.index !=  poem.content|ssplit('。')|length%}
                                <p class="text-muted">{{ sentence }}。</p>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="text-center">
        <br>
        <button style="min-width: 80px;border-radius: 20px;" class="btn btn-outline-info">
            <a style="color: inherit;text-decoration: none;" href="/ts-poem/"><i class="fa fa-exchange"></i></a>
        </button>
        <p class="text-muted tip-text">截屏分享给好友</p>
    </div>
    </body>
    {% block footer %}
    {% endblock %}

{% endblock %}
